<template>
	<view class="opinion">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:true,title:'投诉管理',color:'#fff'}" />
		<!-- #endif -->
		<view class="top">
			<view class="title"><font>*</font>问题类型</view>
			<view class="problem_type">
				<view :class="[{'active':current == index }]" v-for="(item,index) in problemList" :key="index" @click="chexProblem(index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="main">
			<view class="title">填写意见或建议</view>
			<view class="container">
				<textarea class="content" v-model="content" placeholder="请填写问题描述或建议" maxlength="200" name="" id="" cols="30" rows="10"></textarea>
			</view>
			<view class="photo_submit">
				<view class="image">
					<view class="photo_box">
						<view class="photo_box_item" v-for="(item,index) in imageArr" :key="index">
							<image :src="item" mode=""></image>
						</view>
					</view>
					<view class="add_photo" v-if="imageArr.length != 3"  @click="uploadImage">
						<uni-icons  type="plusempty" size="40" color="#c7c7c7"></uni-icons>
					</view>
				</view>
				<view class="title">
					<text>*最多上传3张截图，总大小10M以下</text>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="title">提交后，您可在反馈记录中查看进度及处理结果</view>
			<view class="submit" @click="submit">提交反馈</view>
		</view>
	</view>
</template>

<script>
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				problemList:['功能异常','新功能建议','体验问题','其他','投诉'],
				current:0,
				imageArr:[],
				content:"",
			};
		},
		onLoad() {
			this.getType()
		},
		methods:{
			//提交
			submit(){
				if(this.content == ""){
					uni.showToast({
						title:'请填写意见或建议',
						icon:"none"
					})
					return false;
				}
				if(this.imageArr.lenth == 0){
					uni.showToast({
						title:'请上传截图',
						icon:"none"
					})
					return false;
				}
				let object = {
					type: this.problemList[this.current].name,
					content:this.content,
					images:this.imageArr
				}
				console.log(object)
				this.$http({
					url:'/api/user/feedback',
					method:'post',
					data:object,
					success:result=>{
						console.log(result)
						if(result.code == 200){
							uni.showToast({
								title:result.msg
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						}
					}
				})
			},
			//获取意见类型
			getType(){
				this.$http({
					url:'/api/group_data/feedback_type',
					method:'get',
					success:result=>{
						console.log(result)
						if(result.code == 200){
							this.problemList = result.data.list
						}
					}
				})
			},
			//选择意见类型
			chexProblem(i){
				this.current = i
			},
			
			//上传图片
			uploadImage() {
				const that = this
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: async function(res) {
						const tempFilePaths = res.tempFilePaths;
						console.log(res.tempFiles, 'beforre--------');
						if (res.tempFiles[0]['size'] > 20 * 1024 * 1024) {
							uni.showToast({
								title: '图片大小不能超过20M',
								icon: 'none',
								duration: 3000
							});
							return;
						}
						uni.showLoading({
							title: '上传中...',
							mask:true,
						})
						if (res.tempFiles[0]['size'] < 5 * 1024 * 1024) { //图片小于5M不压缩，大于5M压缩
							that.uploadImgFile(tempFilePaths, that)
						} else {
							// #ifndef H5
							uni.compressImage({
								src: res.tempFilePaths[0],
								quality: 80,
								success: result => {
									console.log(result, '=========res');
									that.uploadImgFile(result.tempFilePath, that)
								}
							})
							// #endif
							// #ifdef H5
							let src = await that.$image(tempFilePaths[0])
							that.uploadImgFile([src.data], that)
							// #endif
						}
					}
				});
			},
			uploadImgFile(filePath, that) {
				uni.uploadFile({
					url:this.service +'/api/upload_image',
					filePath: filePath[0],
					name: 'image',
					header: {
						Authorization:'Bearer '+ uni.getStorageSync('token')
						// Authorization:'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJkYW9qaWEud2VhcHBlLmNuIiwiYXVkIjoiZGFvamlhLndlYXBwZS5jbiIsImlhdCI6MTY1NzA4OTQ4MCwibmJmIjoxNjU3MDg5NDgwLCJleHAiOjE2NTk2ODE0ODAsImRhdGEiOnsiaWQiOjIyfX0.TGdJfr1tOq8JZFxjsAZbb4ScfTnSJ0GgVFVOpxlj43o'
					},
			 	success: response => {
						let res = JSON.parse(response.data);
						console.log(res, '----res');
						if (res.code == 200) {
							that.showInfo = res.data
							if(that.imageArr.length == 3){
								uni.showToast({
									title:'最多上传3张截图',
									icon:"error"
								})
								return false;
							}else{
								that.imageArr.push(res.data.url)
							}
							console.log('请求成功_______________', res);
							uni.hideLoading()
							// 调用下载接口
							// that.downloadImg(res.data.attachId);
			
						}
			  },
					fail: err => {
						uni.hideLoading()
						console.log('请求失败_______________', err);
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.opinion{
		// margin: 0 12px;
		.top{
			margin:0 16px;
			margin-top: 50px;
			.title{
				color: #191919;
				font-size: 16px;
				font-weight: bold;
				>font{
					color: red;
				}
			}
			.problem_type{
				margin-top: 18px;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				>view{
					margin: 5px 3px;
					text-align: center;
					padding: 2px 15px;
					background-color: #fff;
					border-radius: 9px;
					color: #535353;
				}
			}
		}
		.main{
			margin:0 12px;
			height: 330px;
			border-radius: 16px;
			margin-top: 15px;
			background-color: #fff;
			padding:16px 13px 0 19px;
			.container{
				margin: 12px 0;
				.content{
					width: 96%;
					padding:5px 2%;
					height: 120px;
					background-color: #F1F1F1;
					text-indent: 10px;
					font-size: 14px;
					color: #535353;
					border-radius: 14px;
				}
			}
			.photo_submit {
				height: 129px;
				border: none;
				background-color: #F1F1F1;
				padding: 9px 19px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-radius: 14px;
				.image{
					flex: 1;
					display: flex;
					.photo_box{
						display: flex;
						justify-content: space-evenly;
						.photo_box_item{
							width: 87px;
							height: 87px;
							margin-right: 10px;
							>image{
								width: 100%;
								height: 100%;
							}
						}
					}
					.add_photo {
						width: 87px;
						height: 87px;
						line-height: 100px;
						text-align: center;
						background-color: #fff;
						color: #c7c7c7;
						border-radius: 8px;
						>image {
							width: 100%;
							height: 100%;
						}
					}
				}
				.title {
					height: 24px;
					font-size: 12px;
					color: #fd5c5b;
					margin-bottom: -10px;
				}
			}
		}
		.bottom{
			margin: 0 12px;
			.title {
				font-size: 14px;
				color: #fd5c5b;
				margin: 35px 0 40px 30px;
			}
			.submit{
				margin: 0 9px;
				height: 44px;
				line-height: 44px;
				font-size: 20px;
				font-weight: bold;
				color: #fff;
				background-color: #24D576;
				border-radius: 18px;
				text-align: center;
			}
		}
	}
	.active{
		color: #fff !important;
		background-color: #24D576 !important;
	}
</style>
